<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定的两种方式</title>
    <!-- 导入vue库依赖 -->

    <style>
        .activity {
            border: 1px solid pink;
            width: 100px;
            height: 100px;
        }

        .error {

            background-color: blue;
        }
    </style>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <div v-bind:class={activity:isActivity,error:isError}>
            测试数据
        </div>
        <button v-on:click='change'>切换</button>
        <p>--------------------</p>
        <h4>样式绑定的的第二种实现方式</h4>

        <div v-bind:class=[activityC,errorC]>
            测试数据
        </div>
        <button v-on:click='change2'>切换2</button>

        <!-- 内联样式的绑定写法 v-bind:style -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '',
                isActivity: true,
                isError: true,
                activityC: 'activity',
                errorC: 'error',
                flag: true

            },
            methods: {
                change: function () {
                    this.isActivity = !this.isActivity
                    this.isError = !this.isError
                },
                change2: function () {
                    if (this.flag) {
                        this.flag = false
                        this.activityC = ''
                        this.errorC = ''
                    } else {
                        this.flag = true
                        this.activityC = 'activity'
                        this.errorC = 'error'
                    }

                }
            },
        })
    </script>
</body>

</html>

<!-- vue中if判断语法 -->

<!-- v-if
v-else-if
v-else-if
v- else -->

<!-- v-if 与 v-show (display : none) 的区别在于一个没有渲染到界面上 一个是渲染到界面上了当时隐藏显示了 -->

<!-- v-for 遍历一组数据 并且需要设置Key的原因是帮助vue区分不同的元素，从而提高性能 -->

<!-- v-if 和 v-for联合使用 v-if是条件语句  v-for 是遍历动作 -->